<%--
  Created by IntelliJ IDEA.
  User: 87070
  Date: 2022/10/27
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/static/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div>
    <div style="width: 610px;height:700px;float: left;">
        <div id="main" style="width: 600px;height:300px; "></div>
        <div id="circlemain" style="width: 600px;height:200px; "></div>
        <div id="left" style="width: 600px;height:280px;">
            <table class="layui-hide" id="test" lay-filter = "test"></table>
        </div>
    </div>
    <div id="right" style="width: 1000px; float: left;margin-left:40px">

        <%--查询框--%>
            <%--查询条件--%>
            <form class="layui-form" action="">

                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tel" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性格颜色</label>
                    <div class="layui-input-block">
                        <select name="color"  class="layui-select">
                            <option value="">请选择...</option>
                            <option value="红色">红色</option>
                            <option value="黄色">黄色</option>
                            <option value="绿色">绿色</option>
                            <option value="蓝色">蓝色</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>

                </div>



                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <%--查询条件结束--%>
        <%--存放一个table--%>
            <table class="layui-hide" id="test2" lay-filter = "test2"></table>
    </div>

</div>
<%--存放一个table--%>

<script type="text/javascript">



        layui.use(['table','layer','form','jquery','tree'], function(){
            var tree = layui.tree;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var namestatus=true;

            var colordata=[];
            var countdata=[];
            var cicledata=[];


            table.render({
                // element  元素
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/tFpaRecord/tj' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
                //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    //{type: 'checkbox', fixed: 'left'}
                    {type:'numbers',title:'编号'}
                    ,{field:'count', title: '人数', sort: true,}
                    ,{field:'color', title: '性格颜色', sort: true,}
                ]],
                done: function(res, curr, count){

                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                   //alert(JSON.stringify(res.data));

                   res.data.forEach(function (item){
                       colordata.push(item.color);
                       countdata.push(item.count);
                       var obj={};
                       obj["value"]=item.count;
                       obj["name"]=item.color;
                       cicledata.push(obj);
                   })
                    // 数据渲染完之后开始显示echart的图
                    getEchartPic1();
                    getEchartPic2();
                }

            });
            table.render({
                // element  元素
                elem: '#test2'
                ,page:true
                ,limit:10
                ,limits:[10,20,30]
                ,toolbar: '#toolbarDemo'
                ,url:'${pageContext.request.contextPath}/tFpaRecord/tj2' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    // {type: 'checkbox', fixed: 'left'}
                    {type:'numbers',title:'编号'}
                    // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                    ,{field:'username', title: '用户名', sort: true}
                    ,{field:'tel', title: '电话', sort: true}
                    ,{field:'createtime', title: '做题时间', sort: true}
                    ,{field:'red', title: '红色得分', sort: true}
                    ,{field:'green', title: '绿色得分', sort: true}
                    ,{field:'yellow', title: '黄色得分', sort: true}
                    ,{field:'blue', title: '蓝色得分', sort: true}
                    ,{field:'color', title: '分析类型', sort: true}
                    // ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
                ]]

            });

            // 查询
            form.on('submit(formDemo)', function(data){
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                table.reload('test2', {
                    where: data.field,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });


            var getEchartPic1=function (){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '性格分析数据'
                    },
                    tooltip: {},
                    legend: {
                        data: ['性格人数']
                    },
                    xAxis: {
                        data: colordata
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '性格人数',
                            type: 'bar',
                            data: countdata

                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
            // 饼状图的填充
            var getEchartPic2=function (){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('circlemain'));

                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: '性格测试分析数据',
                        // subtext: '分析数据',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    color:["darkred","darkgreen","darkblue","yellow","darkpink"],
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data:cicledata
                            // data: [
                            //     { value: 1048, name: 'Search Engine' },
                            //     { value: 735, name: 'Direct' },
                            //     { value: 580, name: 'Email' },
                            //     { value: 484, name: 'Union Ads' },
                            //     { value: 300, name: 'Video Ads' }
                            // ]
                            ,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }


    })


</script>
</body>


</html>
